<template>
    <div>
        <!-- 购物车页面 -->
        <!-- 顶部导航组件 -->
        <van-nav-bar left-text="返回" left-arrow @click-left="$router.go(-1)">
            <template #title>
                购物车({{ cartNum }})
            </template>
        </van-nav-bar>
        <!-- 购物车内容部分 -->
        <!-- 当购物车有内容时显示 -->
        <div>
            <van-swipe-cell v-for='item in cartList' :key='item.cartid'>
                <!-- 复选框 -->
                <van-checkbox class='eachBox' v-model="item.flag" @click='danxuanFn(item.cartid,item.flag )' ></van-checkbox>

                <!-- 商品卡片 -->
                <van-card :num="item.num" :price="item.originprice" desc="暂无描述" :title="item.proname" class="goods-card"
                    :thumb="item.img1">
                    <!-- 步进器 -->
                    <template #footer>
                        <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
                            @change="changeNub(item.cartid,item.num)" />
                    </template>
                </van-card>
                <!-- 删除单条按钮 -->
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="del(item.cartid)"/>
                </template>
            </van-swipe-cell>
        </div>
        <!-- 当购物车为空时显示 -->
        <div v-if="show">
            <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="描述文字" />
        </div>
        <!-- 分割线 -->
        <van-divider>你可能还想要</van-divider>
        <!-- 购物车相关商品组件 -->
        <goodsMoreComVue></goodsMoreComVue>
        <!-- 购物车底部结算全选价格组件 -->
        <van-submit-bar :price="totalprice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkAll" class="CHECK" @click='quanxuan'>全选</van-checkbox>
            <template #tip>你的收货地址不支持同城送,
                <span @click="onClickEditAddress">修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>

<script setup lang="ts">
// 引入接口
import { lookCartApi } from '@/api/detailAPI'
import { selectone, selectall ,updatanum,deleteone} from '@/api/cartApi'
// 引入购物车推荐商品组件
import goodsMoreComVue from '@/components/cart/goodsMoreCom.vue';
import { ref, type Ref, reactive, computed, watch, defineProps, defineEmits, onBeforeMount } from 'vue'
import { useUserStore } from '@/store/useUserStore'
const UserStore = useUserStore()


//定义购物车内容部分显示何种状态
let show = ref(false)
// 调用查看购物车数据接口
// 定义当前购物车数量
let cartNum = ref<number>()
// 定义总价
const totalprice = ref(0)
// 定义购物车列表
let cartList: any = ref([])
//全选按钮的状态
const checkAll = ref(true)
// interface lookCart {
//     userid: string,
// }

const lookCartFn:any = () => {
    lookCartApi({ userid: UserStore.userid }).then((res: any) => {
        if (res.code == 200) {
            console.log('查看购物车数据', res);
            // 先清空一下总价，否则会累加
            totalprice.value = 0
            cartNum.value = res.data.length
            res.data.forEach((item: any) => {
                if(item.flag){
                    totalprice.value += (item.originprice * item.num * 100)
                }
                
                console.log('初始',item.flag);
            })
               // 如果数组中有一个数据是未选中，则全选按钮也不选中，反之全选按钮也选中
            res.data.some((item: any) => {
                return item.flag == false
            }) ? checkAll.value = false : checkAll.value = true
            

            cartList.value = res.data
            if (res.data?.length == 0) {
                show.value = true
            }
        }
    })
}
    lookCartFn()


// 调用更新当前单选选中状态接口
const danxuanFn:any = (cartid: string, flag: boolean,) => {
    selectone({ cartid: cartid, flag: flag }).then((res: any) => {
        console.log('单选',res);
        if (res.code == 200) {
            lookCartFn()
        }
    })
}

const quanxuan:any=(userid:string,type:boolean)=>{
    selectall({userid:UserStore.userid,type:checkAll.value}).then(((res:any)=>{
        console.log('全选',res);
        if (res.code == 200) {
            lookCartFn()
        }
    }))
}

// 步进器
const changeNub=(cartid:string,num:Number)=>{
    updatanum({cartid:cartid,num:num}).then((res:any)=>{
        console.log('步进器',res);
        if (res.code == 200) {
            lookCartFn()
        }
    })

}

const del=(cartid:string)=>{
    deleteone({cartid:cartid}).then((res:any)=>{
        console.log('删除',res);
        if (res.code == 200) {
            lookCartFn()//重新渲染
        }
        
    })
}









</script>
<style scoped lang="scss">
.van-swipe-cell {
    .eachBox {
        position: absolute;
        z-index: 99;
        margin: 40px 0px 50px 8px;
    }

    .van-card {
        margin-left: 20px;
    }

    .van-stepper {
        position: absolute;
        z-index: 10;
        top: 73px;
        right: 55px;
    }

}


.delete-button {
    height: 100%;
}
</style>